<?php if(empty($this->error)):?>
    <?php 
    $this->headLink()
              ->appendStylesheet($this->baseUrl() . '/application/modules/Talktangle/externals/styles/main.css');
     $this->headScript()
          ->appendFile($this->baseUrl() . '/application/modules/Talktangle/externals/scripts/crosstangle.js');
     $this->headScript()
          ->appendFile($this->baseUrl() . '/application/modules/Talktangle/externals/scripts/main.js');
      
    ?>
    
    <div class="grid    " style="position:relative; width:602px; height:460px;"> 
    <?php
        $count = count($this->anphabetic)-1;
        
        $settingApi = Engine_Api::_()->getApi('settings','core');
        $rowCount =   $settingApi->getSetting('talktangle.cross.rowcount',15);//15;
        $columCount = $settingApi->getSetting('talktangle.cross.colcount',15);//15;
        
        $index = 0;
        for($row = 1;$row<=$rowCount;$row++){
            for($col = 1;$col<=$columCount;$col++){
                $rand = mt_rand(0,$count);
                $value = $this->anphabetic[$rand] ;
                if(isset($this->matric[$row-1][$col-1])) {
                    $value =  $this->matric[$row-1][$col-1];
                }
                
                echo '<div class = "cell row'.$row.' col'.$col.' index-'.$index.' text-'.$value.'">'.$value .'</div>';
                $index++;
            }
        }
    ?>
    <div id="command_use_id" class="command_use_id"> use it</div>
    </div>
    <div class="crosstangle_description_untangle">
        Click on squares to make word to fill each sentence below. You must click on the sentence you are finding the word fore and then match the word to each sentence. You must complete all sentences before any other users to claim the points.
    </div>
    <div class="crosstangle_content_untangle">
        <?php $tangleCount = count($this->tangleContent);?>
        <?php foreach ($this->tangleContent as $key => $value):?>
        <div class="crosstangle_description_untangle_item">
            <?php echo $this->tangleDescription[$key]; echo ' '.strlen($value).' Letters'?>
        </div>
        <div class="crosstangle_content_untangle_item">
            
            <input type="text" class="answer_item" id="answer_item_select_<?php echo $key ?>" name="item[<?php echo $key?>]"/> 
            <span onclick="crosstangle.selectAnswerItem(<?php echo $key ?>);"> answer</span>
            <span onclick="crosstangle.resetAnswerItem(<?php echo $key ?>);"> reset</span> 
        </div>
            
        <?php endforeach;?>
    </div>
    <div class="cross_choose_result_label"> you select:</div>
    <div id="cross_choose_result" class="cross_choose_result">
     
     
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        <div class="crosstangle_select_word_dragable" style="display:none;">
            <div class="remove_item"></div>
            <div class="view_text"></div>
        </div>
        
    </div>
    <div class="cross_choose_result_send"> Un-Tangle</div>
    
    <script type="text/javascript">
        var crosstangle = new crossTangle($('global_content'),<?php echo $this->viewer->user_id?>,<?php echo $this->tangle_id?>);
        crosstangle.initAnswerItemSelect();
        
        
    </script>
<?php else :?>
   
        <div class="tip">
            <span > <?php echo $this->message?></span>
        </div>
    
<?php endif;?>